<?php

$cs=Yii::app()->getClientScript();
$cs->registerCoreScript('jquery');

$cs->registerScript('functionResetSequence',"
    function resetSequence()
    {
        $('.recipe-step').each(function(i){
            $(this).find('.recipe-step-sequence').html('第'+(i+1)+'步');
        });        
    }", CClientScript::POS_HEAD);                

$cs->registerScript('functionSetStepImage',"
    function setStepImage(i, image)
    {
        var step=$('#recipe-step-'+i);
        if(step.length==0) {
            location.reload();
        }
        var stepImage=step.find('.recipe-step-image');
        if(image.length==0) {
            stepImage.html('');
        }
        else {
            var html='<img src=\''+image+'\' \>';
            stepImage.html(html);
        }            
    }", CClientScript::POS_HEAD);                

$cs->registerScript('resetSequence',"resetSequence();");

if($edit){
    $cs->registerScriptFile(SystemAsset::toUrl('jquery.jeditable.js'));
    $cs->registerScriptFile(SystemAsset::toUrl('jquery.charcounter.js'));
    $cs->registerScriptFile(SystemAsset::toUrl('jquery.jeditable.charcounter.js'));
    $cs->registerScriptFile(SystemAsset::toUrl('jquery.colorbox.js'));
    $cs->registerCssFile(SystemAsset::toUrl('colorbox.css'));
    $savingImage=CHtml::normalizeUrl(SystemAsset::toUrl('ajax-loader.gif'));
    $indicator=CJavaScript::quote(CHtml::image($savingImage));
    $appendStepUrl=CJavaScript::quote(CHtml::normalizeUrl(array('appendStep','id'=>$recipe->id)));
    $deleteStepUrl=CJavaScript::quote(CHtml::normalizeUrl(array('deleteStep','id'=>$recipe->id)));
    $forwardStepUrl=CJavaScript::quote(CHtml::normalizeUrl(array('forwardStep','id'=>$recipe->id)));
    $backwardStepUrl=CJavaScript::quote(CHtml::normalizeUrl(array('backwardStep','id'=>$recipe->id)));
    $setStepMemoUrl=CJavaScript::quote(CHtml::normalizeUrl(array('step/setMemo','recipeId'=>$recipe->id)));
    $setStepImageUrl=CJavaScript::quote(CHtml::normalizeUrl(array('step/setImage','recipeId'=>$recipe->id)));

    $maxStep=Recipe::MAX_STEPS;
    $cs->registerScript('functionAppendStep',"
        function appendStep(i)
        {
            var steps=$('.recipe-step');
            if(steps.size()==$maxStep) {
                alert('步骤不能超过{$maxStep}个');
                return;
            }

            $.post('$appendStepUrl',
                {step: i},
                function(data){
                    if(data.succ){
                        var step=$('#recipe-step-'+i);
                        if(step.length==0){
                            location.reload();
                        }
                        step.after('<div class=\'recipe-step\' id=\'recipe-step-'+data.id+'\'><h4><span class=\'recipe-step-sequence\'></span></h4><div class=\'recipe-step-image\'></div><div class=\'recipe-step-memo\'></div><input type=\'hidden\' class=\'recipe-step-id\' value=\''+data.id+'\' /></div>');
                        initStep($('#recipe-step-'+data.id));
                        resetSequence();
                    }
                    else {
                        if(data.error) alert(data.error);
                        location.reload();
                    }
                }, 'json');
        }", CClientScript::POS_HEAD);
             
    $minStep=Recipe::MIN_STEPS;
    $cs->registerScript('functionDeleteStep',"
        function deleteStep(i)
        {
            var steps=$('.recipe-step');
            if(steps.size()==$minStep){
                alert('步骤不能少于{$minStep}个');
                return;            
            }
            if(!confirm('您确认删除此操作步骤？')) return;
            $.post('$deleteStepUrl',
                {step : i},
                function(data){
                    if(data.succ){
                        var step=$('#recipe-step-'+i);
                        if(step.length==0){
                            location.reload();
                        }
                        step.remove();
                        resetSequence();
                    }
                    else {
                        if(data.error) alert(data.error);
                        location.reload();
                    }
                }, 'json');
        }", CClientScript::POS_HEAD);

    $cs->registerScript('functionForwardStep',"
        function forwardStep(i)
        {
            if($('#recipe-step-'+i).prev().length==0)
                return;
            $.post('$forwardStepUrl',
                {step : i},
                function(data){
                    if(data.succ){                        
                        var step=$('#recipe-step-'+i);
                        if(step.length==0){
                            location.reload();
                        }
                        var prevStep=step.prev();
                        prevStep.before(step);
                        resetSequence();
                    }
                    else {
                        if(data.error) alert(data.error);
                        location.reload();
                    }
                }, 'json');
        }", CClientScript::POS_HEAD);

    $cs->registerScript('functionBackwardStep',"
        function backwardStep(i)
        {
            if($('#recipe-step-'+i).next().length==0)
                return;
            $.post('$backwardStepUrl',
                {step : i},
                function(data){
                    if(data.succ){                        
                        var step=$('#recipe-step-'+i);
                        if(step.length==0){
                            location.reload();
                        }
                        var nextStep=step.next();
                        nextStep.after(step);
                        resetSequence();
                    }
                    else {
                        if(data.error) alert(data.error);
                        location.reload();
                    }
                }, 'json');
        }", CClientScript::POS_HEAD);

    $memoMaxLen=Step::MEMO_MAX_LEN;
    $cs->registerScript('functionInitStep',"
        function initStep(stepObj)
        {        
            var i=stepObj.find('.recipe-step-id').val();
            stepObj.find('.recipe-step-memo').editable('$setStepMemoUrl', {
                indicator : '$indicator',
                submitdata : {'step':i},
                type      : 'textarea_charcounter',
                rows      : 3,
                onblur    : 'submit',
                charcounter : {
                    characters : $memoMaxLen
                }
            });
            
            var appendStepUrl='javascript:appendStep('+i+');';
            var deleteStepUrl='javascript:deleteStep('+i+');';
            var forwardStepUrl='javascript:forwardStep('+i+');';            
            var backwardStepUrl='javascript:backwardStep('+i+');';
            stepObj.find('.recipe-step-sequence').after(' <span><a href='+appendStepUrl+'>追加</a></span> <span><a href='+deleteStepUrl+'>删除</a></span> <span><a href='+forwardStepUrl+'>向前</a></span> <span><a href='+backwardStepUrl+'>向后</a></span> <span><a href=\'#\' class=\'edit-step-image\'>编辑图片</a></span>');
        
            var steImageUrl='$setStepImageUrl'+'?step='+i;
            stepObj.find('.edit-step-image').colorbox({href:steImageUrl,width:500, height:240, iframe:true});
        }", CClientScript::POS_HEAD);

    $cs->registerScript('functionInitSteps',"
        $('.recipe-step').each(function(i){
            initStep($(this));
        });        
    ");    
}

foreach($steps as $step){
?>

    <div class='recipe-step' id='recipe-step-<?=$step->id?>'>
        <h4><span class='recipe-step-sequence'></span></h4>
        <div class='recipe-step-image'></div>
        <div class='recipe-step-memo'><?php echo nl2br(CHtml::encode($step->memo)); ?></div>
        <input type='hidden' class='recipe-step-id' value='<?=$step->id?>' />
        <script>setStepImage(<?=$step->id?>, '<?=UserImage::toUrl('step',$step->image,'small')?>');</script>
    </div>    

<?php } ?>